﻿<%@ Page Title="" Language="C#" MasterPageFile="~/UserView.Master" AutoEventWireup="true" CodeBehind="GoodsDesc.aspx.cs" Inherits="Web.GoodsDesc" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link href="Content/Css/GoodsDesc.css" rel="stylesheet" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="container">
        <div class="goodsImg">
            <asp:Repeater ID="Repeater1" runat="server">
                <ItemTemplate>
                    <div class="desc_list">
                        <img src='Content/Images/Goods/<%#Eval("GoodsPic") %>' alt="Alternate Text" />
                        <div class="GoodsDesc_txt">
                            <dl>
                                <dt class="name-dd"><span class="name"><%#Eval("GoodsName") %></span></dt>
                                <dd class="desc-dd"><span class="desc"><%#Eval("GoodsDESC") %></span></dd>
                                <dd class="price-dd"><span class="price">&yen;<%#Eval("GoodsPrice") %></span></dd>
                                <dd>库存:<span class="nums"><%# Eval("GoodsNum") %></span>
                                    <div class="number-stepper">
                                        数量：
                                        <button type="button" class="minus-btn">-</button>
                                        <input type="number" class="number-input" value="1" name="ipt1"/>
                                        <button type="button" class="plus-btn">+</button><asp:Label Text="" runat="server" ForeColor="#FF3300" class="waring"/>
                                    </div>
                                    <asp:Button ID="Button1" runat="server" Text="加入购物车" OnClick="Button1_Click" CommandArgument='<%#Eval("GoodsID") %>' CssClass="cart_btn" />
                                </dd>
                            </dl>
                        </div>
                    </div>
                </ItemTemplate>
            </asp:Repeater>
        </div>
        <div class="desc_Img">
            <asp:Repeater ID="Repeater2" runat="server">
                <ItemTemplate>
                    <img src='<%#Eval("GoodsDescPic1") %>' alt="Alternate Text" />
                    <img src='<%#Eval("GoodsDescPic2") %>' alt="Alternate Text" />
                    <img src='<%#Eval("GoodsDescPic3") %>' alt="Alternate Text" />
                    <img src='<%#Eval("GoodsDescPic4") %>' alt="Alternate Text" />
                    <img src='<%#Eval("GoodsDescPic5") %>' alt="Alternate Text" />
                    <img src='<%#Eval("GoodsDescPic6") %>' alt="Alternate Text" />
                    <img src='<%#Eval("GoodsDescPic7") %>' alt="Alternate Text" />
                    <img src='<%#Eval("GoodsDescPic8") %>' alt="Alternate Text" />
                    <img src='<%#Eval("GoodsDescPic9") %>' alt="Alternate Text" />
                    <img src='<%#Eval("GoodsDescPic10") %>' alt="Alternate Text" />
                </ItemTemplate>
            </asp:Repeater>
        </div>
    </div>
    <script>
        // 获取数字输入框和加减按钮
        const numberInput = document.querySelector('.number-input');
        const minusBtn = document.querySelector('.minus-btn');
        const plusBtn = document.querySelector('.plus-btn');
        const nums = document.querySelector('.nums').innerText;
        const waring = document.querySelector('.waring');
        // 减少数字
        minusBtn.addEventListener('click', function () {
            if (nums > parseInt(numberInput.value)) {
                waring.innerHTML = " "
            }
            const currentValue = parseInt(numberInput.value);
            if (currentValue > 1) {
                numberInput.value = currentValue - 1;
            }
        });

        // 增加数字
        plusBtn.addEventListener('click', function () {
            if (nums > parseInt(numberInput.value)) {
                const currentValue = parseInt(numberInput.value);
                numberInput.value = currentValue + 1;
            } else {
                waring.innerHTML="购买数量不得大于库存数！"
            }
            if (nums > parseInt(numberInput.value)) {
                waring.innerHTML = " "
            }
        });
    </script>
</asp:Content>
